<template>
	<view class="items-container borderBox colCen">
		<view class="image-container defIcon">
			<image style="border-radius: 8rpx 8rpx 0px 0px;" :src="items.mainPic | imgSrc" mode="aspectFill"></image>
		</view>
		<view class="goodsInfo colCenBet borderBox">
			<view class="topgoodsname-box colCen">
				<view class="goodsName-box rowCen">
					<view class="typeIcon-content defIcon">
						<image :src="items.icon" mode="heightFix"></image>
					</view>
					<view class="goodsText">
						{{items.dtitle}}
					</view>
				</view>
			</view>


			<view class="goodsPrice-goodSale colCen borderBox">
				<view class="couponInfo-bar rowCen">
					<view class="couponbox rowCenCen" v-if="items.couponPrice>0 || items.searchSource==4">
						<view>
							{{items.searchSource==4?(items.discount+'折'):items.couponPrice+'元券'}}
						</view>
					</view>
					<!-- <view class="backPrice rowCenCen">
						<view>返{{items.fanli}}元</view>
					</view> -->
				</view>

				<view class="card-bottom-info rowCenBet">
					<view class="goods-price rowEnd">
						<view class="font">
							券后
						</view>
						<view class="rmb">
							￥
						</view>
						<view class="price">
							{{items.actualPrice}}
						</view>
					</view>
					<view class="saleNum-box" v-if="items.monthSales!=-1">
						已售{{items.monthSales}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			items: Object
		},
		data() {
			return {

			}
		},
		filters: {
		    imgSrc: function (url) {
				if (url.indexOf('alicdn') >= 0){				
		            if (url.indexOf('.jpg') >= 0){
		                return url + '_310x310.jpg';
		            }else{
					    return url;
				    }
				}else if (url.indexOf('_310x310') >= 0){
					return url;
				}else{
					return url;
				}
		    },
			shopname: function (type) {
			    if (type.length >= 8) {					
			        return type.substring(0,8)+'...';			 
			    } else {
			        return type;
			    }
			}
		}
	}
</script>

<style lang="scss">
	.items-container {
		width: 346rpx;
		height: 100%;
		overflow: hidden;
		border-radius: 8rpx;
		background-color: #FFFFFF;

		.image-container {
			width: 100%;
			height: 336rpx;
		}

		.goodsInfo {
			width: 100%;
			height: 190rpx;
			margin-top: 10rpx;
			padding: 0 10rpx 10rpx 10rpx;

			.topgoodsname-box {
				width: 100%;

				.goodsName-box {
					width: 100%;
					position: relative;

					.typeIcon-content {
						width: 60rpx;
						height: 24rpx;
						position: absolute;
						top: 6rpx;
					}

					.goodsText {
						flex: 1;
						font-size: 26rpx;
						line-height: 34rpx;
						font-weight: 500;
						text-indent: 2.5em;
						color: #333333;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}

			.goodsPrice-goodSale {
				width: 100%;

				.couponInfo-bar {
					width: 100%;
					margin: 5rpx 0;

					.couponbox {
						height: 30rpx;
						background: linear-gradient(255deg, #FF437E, #FF7755);
						border-radius: 5rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-right: 10rpx;
						padding: 0 10rpx;
					}

					.backPrice {
						padding: 0 10rpx;
						height: 30rpx;
						background: linear-gradient(-90deg, #7619EC, #A429F3);
						border-radius: 5rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.card-bottom-info {
					width: 100%;
					margin-top: 15rpx;

					.goods-price {
						line-height: 34rpx;

						.font {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
						}

						.rmb {
							font-weight: 500;
							font-size: 24rpx;
							color: #FF4242;
							line-height: 34rpx;
						}

						.price {
							color: #FF4242;
							font-weight: bold;
							font-size: 28rpx;
							line-height: 34rpx;
						}
					}

					.saleNum-box {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
	}
</style>
